<template>
  <div class="num-total" ref="numTotalBox">
    <a-row
      class="h-100p"
      :gutter="[0, 16]"
      style="margin-left: 8px; margin-right: -16px"
    >
      <a-col v-for="(list, listIndex) of data" :key="listIndex" :span="24">
        <a-row :gutter="16" class="w-100p h-100p border-radius-4">
          <a-col
            class="total-number chart-box2"
            v-for="(item, key) in list"
            :key="key"
            :span="8"
            style="border-radius: 0"
          >
            <div class="number-box number">
              <count-to
                :start-val="item.oldVal"
                :end-val="item.newVal"
                :duration="3000"
              />
              <span class="unit"> {{ item.unit }} </span>
            </div>
            <div class="title">{{ item.title }}</div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  nextTick,
  onMounted,
} from "vue";
import CountTo from "../countTo/index.vue";
import store from "../../../../store";

export default defineComponent({
  name: "MeetingRoomNumTotal",
  components: { CountTo },
  setup() {
    const state = reactive({
      numTotalBox: null,
      itemWidth: "100px",
      data: [
        {
          total_book_count: {
            oldVal: 0,
            newVal: 123,
            title: "本月预定次数",
            unit: "次",
          },
          total_book_amount: {
            oldVal: 0,
            newVal: 688,
            title: "本月交易额",
            unit: "元",
          },
          curr_month_book_time: {
            oldVal: 0,
            newVal: 18,
            title: "本月租赁时长",
            unit: "小时",
          },
        },
        {
          curr_month_book_count: {
            oldVal: 0,
            newVal: 2089,
            title: "累计预定次数",
            unit: "次",
          },
          total_month_book_time: {
            oldVal: 0,
            newVal: 178000,
            title: "累计交易额",
            unit: "元",
          },
          curr_month_book_amount: {
            oldVal: 0,
            newVal: 2300,
            title: "累计租赁时长",
            unit: "小时",
          },
        },
      ],
    });

    watch(
      () => store.getters.centerControl.MeetingRoom_bookStatistic,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { MeetingRoom_bookStatistic } = store.getters.centerControl;
      if (MeetingRoom_bookStatistic) {
        for (let key in MeetingRoom_bookStatistic) {
          let data =
            state.data[0][key] || state.data[1][key] || state.data[2][key];
          if (data) {
            data.oldVal = data.newVal;
            data.newVal = MeetingRoom_bookStatistic[key];
          }
        }
        state.data.forEach((v) => {
          for (let key in v) {
            if (!MeetingRoom_bookStatistic.hasOwnProperty(key)) {
              v[key].oldVal = v[key].newVal;
              v[key].newVal = 0;
            }
          }
        })
      }
    };

    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.num-total {
  width: 100%;
  height: 100%;
}
.unit {
  font-size: 1.4rem;
  margin-left: 0.5rem;
}
</style>
